<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col group_3">
      <text class="fun-self-start font text_3">Change My Wallet Name</text>
      <view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch text-wrapper">
        <input class="font_2 text_4 text_5"  placeholder="To distinguish between different crypto accounts under your name"/>
      </view>
      <text class="fun-self-start font text_6">The type of virtual currency</text>
      <view class="fun-flex-row fun-self-stretch group_4">
        <view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2" :class="currency == 1 ? 'active' : ''" @click="currency = 1">
          <text class="font_3">USDT</text>
        </view>
        <view class="fun-ml-14 fun-flex-col fun-justify-start fun-items-center text-wrapper_2" :class="currency == 2 ? 'active' : ''" @click="currency = 2">
          <text class="font_3">ETH</text>
        </view>
      </view>
      <text class="fun-self-start font text_8">Communication protocols</text>
      <view class="fun-flex-col fun-justify-start fun-items-center fun-self-start text-wrapper_4">
        <text class="font_3">TRC20</text>
      </view>
      <text class="fun-self-start font text_9">Your crypto account adress</text>
      <view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch text-wrapper_5">
        <input class="font_2 text_4 text_10" placeholder="Please enter your crypto account adress"/>
      </view>
      <view class="fun-flex-row fun-items-center fun-self-stretch group_5">
        <text class="font_4 text_11">Bound Email:</text>
        <text class="font_2 text_12">123456@qq.com</text>
      </view>
      <view class="fun-flex-row fun-items-center fun-justify-between section">
        <input class="font_2 text_4 text_13" placeholder="Please enter your email verification code"/>
        <view class="fun-flex-col fun-justify-start fun-shrink-0 text-wrapper_6">
          <text class="text_14">Send verification code</text>
        </view>
      </view>
      <view class="fun-flex-col fun-self-stretch group_6">
        <text class="font_5 text_4">
          Please proofread your address carefully. If the adress number is wrong ,funds will not be able to reach the
          account.
          <br />
        </text>
        <text class="font_5 text_4">
          We are using multiple technology to protect the safety of your digital static.
        </text>
      </view>
    </view>
    <view class="fun-flex-row group_7">
      <view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_7">
        <text class="font_6 text_15">Cancel</text>
      </view>
      <view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_8 ml-13">
        <text class="font_6 text_16">Confirm</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
		  currency:"1"
	  };
    },

    methods: {},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-21 {
    margin-left: 42rpx;
  }
  .ml-13 {
    margin-left: 26rpx;
  }
  .page {
    padding: 32rpx 32rpx 270rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 36rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .group_2 {
      margin-top: 52rpx;
      padding: 12rpx 0;
      .image_4 {
        width: 48rpx;
        height: 48rpx;
      }
      .pos {
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .text_2 {
        color: #ffffff;
        font-size: 32rpx;
        font-family: SF Pro Display;
        font-weight: 300;
        line-height: 22.86rpx;
      }
    }
    .group_3 {
      .font {
        font-size: 28rpx;
        font-family: SF Pro Display;
        font-weight: 700;
        color: #ffffff;
      }
      .text-wrapper {
        margin-top: 16rpx;
        padding: 28rpx 20rpx;
        background-color: #1b1d53;
        border-radius: 16rpx;
        border: solid 2rpx #ffffff33;
        .text_5 {
          width:100%
        }
      }
      .text_6 {
        margin-top: 32rpx;
      }
      .group_4 {
        margin-top: 32rpx;
        .text-wrapper_2 {
          padding: 16rpx 0;
          flex: 1 1 330rpx;
          background-color: #1b1d53;
          border-radius: 16rpx;
          .font_3{
          	color: #999;
          }
        }
		.active{
			background-color: #1b1d53;
			border: solid 2rpx #5ceec4;
			.font_3{
				color: #5ceec4;
			}
		}
      }
      .text_4 {
        opacity: 0.5;
      }
	  .text_13{
		 flex:0.9 
	  }
      .text_8 {
        margin-top: 32rpx;
      }
      .text-wrapper_4 {
        margin-top: 32rpx;
        padding: 16rpx 0;
        background-color: #1b1d53;
        border-radius: 16rpx;
        width: 330rpx;
        border: solid 2rpx #5ceec4;
      }
      .font_3 {
        font-size: 24rpx;
        font-family: SF Pro Display;
        font-weight: 300;
        color: #5ceec4;
      }
      .text_9 {
        margin-left: 8rpx;
        margin-top: 40rpx;
        line-height: 25.16rpx;
      }
      .text-wrapper_5 {
        margin-top: 32rpx;
        padding: 28rpx 0;
        background-color: #1b1d53;
        border-radius: 16rpx;
        border: solid 2rpx #ffffff33;
        .text_10 {
          width: 100%;
		  padding: 0 24rpx;
        }
      }
      .font_2 {
        font-size: 24rpx;
        font-family: SF Pro Display;
        color: #ffffff;
      }
      .group_5 {
        padding: 32rpx 0;
      }
      .font_4 {
        font-size: 24rpx;
        font-family: SF Pro Display;
        color: #ffffff;
      }
      .section {
        padding: 8rpx 8rpx 8rpx 24rpx;
        background-color: #1b1d53;
        border-radius: 50rpx;
        .text-wrapper_6 {
          padding: 32rpx 16rpx;
          background-color: #5ceec4;
          border-radius: 50rpx;
          .text_14 {
            color: #000000;
            font-size: 20rpx;
            font-family: SF Pro Display;
          }
        }
      }
      .group_6 {
        padding-top: 32rpx;
        .font_5 {
          font-size: 24rpx;
          font-family: SF Pro Display;
          font-weight: 300;
          color: #ffffff;
        }
      }
    }
    .group_7 {
      margin-top: 48rpx;
      .text-wrapper_7 {
        padding: 32rpx 0;
        flex: 1 1 330rpx;
        background-color: #ffffff;
        border-radius: 50rpx;
      }
      .text-wrapper_8 {
        padding: 32rpx 0;
        flex: 1 1 330rpx;
        background-color: #5ceec4;
        border-radius: 50rpx;
      }
      .font_6 {
        font-size: 24rpx;
        font-family: SF Pro Display;
        font-weight: 700;
        color: #333333;
      }
    }
  }
</style>